// 主页整体布局样式
.home-container {
  max-width: 100%;
  margin: 0;
  padding: 40px;
  min-height: 100vh;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);

  .main-content {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 400px;
    gap: 40px;
    
    @media screen and (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }

  .left-main {
    background: #000000;
    border-radius: 30px;
    box-shadow: 0 0 50px rgba(255, 107, 107, 0.5);
    padding: 40px;
    
    .article-list {
      .article-item {
        padding: 30px;
        margin-bottom: 30px;
        background: #ffffff;
        border: 4px solid #ff6b6b;
        border-radius: 20px;
        transform: rotate(-1deg);
        
        &:nth-child(even) {
          transform: rotate(1deg);
        }
        
        &:hover {
          transform: scale(1.05) rotate(0deg);
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
          border-color: #4ecdc4;
        }

        .article-title {
          font-size: 32px;
          font-weight: 900;
          color: #000;
          text-transform: uppercase;
          text-shadow: 3px 3px 0 #ff6b6b;
          letter-spacing: 2px;
          
          &:hover {
            color: #4ecdc4;
            text-shadow: 5px 5px 0 #ff6b6b;
          }
        }

        .article-summary {
          font-size: 18px;
          line-height: 2;
          color: #333;
          border-left: 8px solid #4ecdc4;
          padding-left: 20px;
          margin: 20px 0;
        }

        .article-meta {
          display: flex;
          align-items: center;
          gap: 30px;
          padding: 20px;
          background: #000;
          border-radius: 15px;
          color: #fff;

          .meta-item {
            font-size: 16px;
            text-transform: uppercase;
            
            .iconfont {
              font-size: 24px;
              color: #ff6b6b;
            }

            &:hover {
              color: #4ecdc4;
              transform: scale(1.1);
            }
          }
        }

        .article-cover {
          margin: 20px -30px;
          
          img {
            width: calc(100% + 60px);
            height: 300px;
            object-fit: cover;
            border: 4px solid #000;
            
            &:hover {
              transform: scale(1.1) rotate(-2deg);
            }
          }
        }
      }
    }
  }

  .right-sidebar {
    .widget {
      background: #000000;
      border-radius: 30px;
      padding: 30px;
      margin-bottom: 40px;
      border: 4px solid #4ecdc4;
      transform: rotate(2deg);

      &:nth-child(even) {
        transform: rotate(-2deg);
      }

      .widget-header {
        font-size: 24px;
        font-weight: 900;
        color: #fff;
        text-transform: uppercase;
        text-align: center;
        padding: 15px;
        background: #ff6b6b;
        margin: -30px -30px 30px;
        border-radius: 25px 25px 0 0;
        letter-spacing: 3px;
      }

      .widget-content {
        .tag-list {
          display: flex;
          flex-wrap: wrap;
          gap: 15px;

          .tag-item {
            padding: 10px 20px;
            background: #fff;
            color: #000;
            border-radius: 50px;
            font-weight: bold;
            font-size: 16px;
            transform: rotate(-5deg);
            border: 3px solid #ff6b6b;

            &:hover {
              background: #ff6b6b;
              color: #fff;
              transform: scale(1.2) rotate(5deg);
            }
          }
        }

        .user-list {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;
          
          .user-item {
            .avatar {
              width: 100px;
              height: 100px;
              border: 5px solid #4ecdc4;
              border-radius: 20px;
              transform: rotate(-5deg);
              
              &:hover {
                transform: rotate(355deg) scale(1.2);
                border-color: #ff6b6b;
              }
            }
            
            .nickname {
              font-size: 18px;
              color: #fff;
              text-align: center;
              margin-top: 10px;
              text-transform: uppercase;
            }
          }
        }
      }
    }
  }
}

// 动画效果
@keyframes bounce {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-20px) rotate(1deg); }
}

.article-item {
  animation: bounce 1s ease infinite;
  animation-play-state: paused;
  
  &:hover {
    animation-play-state: running;
  }
}

// 滚动条
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background: #000;
  border: 5px solid #fff;
}

::-webkit-scrollbar-thumb {
  background: #ff6b6b;
  border: 3px solid #000;
  border-radius: 10px;
  
  &:hover {
    background: #4ecdc4;
  }
}

// 暗色主题
html[data-theme='dark'] {
  .home-container {
    background: linear-gradient(45deg, #ff6b6b, #000);
    
    .article-item {
      background: #111;
      border-color: #ff6b6b;
      
      .article-title {
        color: #fff;
        text-shadow: 3px 3px 0 #4ecdc4;
      }
      
      .article-summary {
        color: #ccc;
      }
      
      .article-meta {
        background: #4ecdc4;
      }
    }
  }
}